<!--
 * @Description:闭包版选项卡修正
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-28 08:05:14
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>闭包版选项卡修正</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			outline: none;
		}

		.box {
			width: 400px;
			margin: 100px auto;
			border: 1px solid #ccc;
		}

		#top button {
			padding: 4px 12px;
		}

		.bottom div {
			width: 100%;
			height: 200px;
			background-color: pink;
			display: none;
		}

		.purple {
			background-color: purple;
		}

		.bottom div.show {
			display: block;
		}
	</style>
	<script>
		window.onload = function () {
			var btns = document.getElementsByTagName("button")
			var divs = document.getElementById("divs")
			var dvs = divs.getElementsByTagName("div")
			for (let i = 0; i < btns.length; i++) {
				// btns[i].onmouseover =tab(i)
				var timer = null
				btns[i].onmouseover = function (num) {
					return function () {
						clearTimeout(timer)
						timer = setTimeout(() => {
							console.log("ssss")
							for (let j = 0; j < btns.length; j++) {
								btns[j].className = '';
								dvs[j].className = ""
							}
							btns[num].className = "purple";
							dvs[num].className = "show";
						}, 300)
					}
				}(i)

        btns[i].onmouseout =function(){
					clearTimeout(timer)
				}


			}
			// function tab(num) {
			// 	return function () {
			// 		for (let j = 0; j < btns.length; j++) {
			// 			btns[j].className = ''; //清空clsaa 
			// 			dvs[j].className="" //隐藏盒子 
			// 		}
			// 			btns[num].className = "purple";
			// 			dvs[num].className = "show"; //隐藏盒子
			// 	}
			// }

		}
	</script>
</head>

<body>
	<div>
		js 动态添加的属性 有效 <br>
		手动添加无效
	</div>

	<div id="box" class="box">
		<div id="top" class="top">
			<button>教育</button>
			<button>培训</button>
			<button>招生</button>
			<button>出国</button>
			<button>添加</button>
		</div>

		<div class="bottom" id="divs">
			<div class="show">教育</div>
			<div>培训</div>
			<div>招生</div>
			<div>出国</div>
			<div>添加</div>
		</div>

	</div>

</body>

</html>